:root {
  --bg: #000;
  --card: #121212;
  --text: #f2f2f2;
  --muted: #b3b3b3;
  --accent: #00ffd5;
  --accent-2: #7cf9ff;
  --font-landour: "landour", "landour Fallback", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif;
  --px110: clamp(40px, 8vw, 110px);
  --px1200: 1200px;

  /* Negative values (most negative first) */
  --_px400: clamp(-400px, -25.32vw, 0px);
  --_px190: clamp(-190px, -12.03vw, 0px);
  --_px180: clamp(-180px, -11.39vw, 0px);
  --_px175: clamp(-175px, -11.08vw, 0px);
  --_px165: clamp(-165px, -10.44vw, 0px);
  --_px150: clamp(-150px, -9.49vw, 0px);
  --_px120: clamp(-120px, -7.59vw, 0px);
  --_px90: clamp(-90px, -5.7vw, 0px);
  --_px80: clamp(-80px, -5.06vw, 0px);
  --_px75: clamp(-75px, -4.75vw, 0px);
  --_px70: clamp(-70px, -4.43vw, 0px);
  --_px63: clamp(-63px, -3.99vw, 0px);
  --_px60: clamp(-60px, -3.80vw, 0px);
  --_px50: clamp(-50px, -3.16vw, 0px);
  --_px45: clamp(-45px, -2.85vw, 0px);
  --_px43: clamp(-43px, -2.72vw, 0px);
  --_px40: clamp(-40px, -2.53vw, 0px);
  --_px35: clamp(-35px, -2.22vw, 0px);
  --_px34: clamp(-34px, -2.15vw, 0px);
  --_px30: clamp(-30px, -1.90vw, 0px);
  --_px25: clamp(-25px, -1.58vw, 0px);
  --_px20: clamp(-20px, -1.27vw, 0px);
  --_px17: clamp(-17px, -1.08vw, 0px);
  --_px15: clamp(-15px, -0.95vw, 0px);
  --_px12: clamp(-12px, -0.76vw, 0px);
  --_px11: clamp(-11px, -0.70vw, 0px);
  --_px10: clamp(-10px, -0.63vw, 0px);
  --_px9: clamp(-9px, -0.57vw, 0px);
  --_px7: clamp(-7px, -0.44vw, 0px);
  --_px5: clamp(-5px, -0.32vw, 0px);
  --_px2: clamp(-2px, -0.13vw, 0px);

  /* Positive values (ascending) */
  --px0: clamp(0px, 0vw, 0px);
  --px1: clamp(0px, 0.06vw, 1px);
  --px1_9: clamp(0px, 0.12vw, 1.9px);
  --px2: clamp(0px, 0.13vw, 2px);
  --px3: clamp(0px, 0.19vw, 3px);
  --px4: clamp(0px, 0.25vw, 4px);
  --px5: clamp(0px, 0.32vw, 5px);
  --px6: clamp(0px, 0.38vw, 6px);
  --px7: clamp(0px, 0.44vw, 7px);
  --px8: clamp(0px, 0.51vw, 8px);
  --px9: clamp(0px, 0.57vw, 9px);
  --px10: clamp(0px, 0.63vw, 10px);
  --px11: clamp(0px, 0.70vw, 11px);
  --px12: clamp(0px, 0.76vw, 12px);
  --px13: clamp(0px, 0.82vw, 13px);
  --px14: clamp(0px, 0.89vw, 14px);
  --px15: clamp(0px, 0.95vw, 15px);
  --px16: clamp(0px, 1.01vw, 16px);
  --px17: clamp(0px, 1.08vw, 17px);
  --px18: clamp(0px, 1.14vw, 18px);
  --px19: clamp(0px, 1.20vw, 19px);
  --px20: clamp(0px, 1.27vw, 20px);
  --px21: clamp(0px, 1.33vw, 21px);
  --px22: clamp(0px, 1.39vw, 22px);
  --px23: clamp(0px, 1.46vw, 23px);
  --px24: clamp(0px, 1.52vw, 24px);
  --px25: clamp(0px, 1.58vw, 25px);
  --px26: clamp(0px, 1.65vw, 26px);
  --px28: clamp(0px, 1.77vw, 28px);
  --px29: clamp(0px, 1.84vw, 29px);
  --px30: clamp(0px, 1.90vw, 30px);
  --px31: clamp(0px, 1.96vw, 31px);
  --px32: clamp(0px, 2.03vw, 32px);
  --px35: clamp(0px, 2.22vw, 35px);
  --px36: clamp(0px, 2.28vw, 36px);
  --px40: clamp(0px, 2.53vw, 40px);
  --px42: clamp(0px, 2.66vw, 42px);
  --px44: clamp(0px, 2.78vw, 44px);
  --px45: clamp(0px, 2.85vw, 45px);
  --px46: clamp(0px, 2.91vw, 46px);
  --px47: clamp(0px, 2.97vw, 47px);
  --px48: clamp(0px, 3.04vw, 48px);
  --px49: clamp(0px, 3.1vw, 49px);
  --px50: clamp(0px, 3.16vw, 50px);
  --px52: clamp(0px, 3.29vw, 52px);
  --px55: clamp(0px, 3.48vw, 55px);
  --px56: clamp(0px, 3.54vw, 56px);
  --px57: clamp(0px, 3.61vw, 57px);
  --px60: clamp(0px, 3.80vw, 60px);
  --px63: clamp(0px, 3.99vw, 63px);
  --px64: clamp(0px, 4.05vw, 64px);
  --px66: clamp(0px, 4.18vw, 66px);
  --px68: clamp(0px, 4.3vw, 68px);
  --px70: clamp(0px, 4.43vw, 70px);
  --px74: clamp(0px, 4.68vw, 74px);
  --px77: clamp(0px, 4.87vw, 77px);
  --px78: clamp(0px, 4.94vw, 78px);
  --px80: clamp(0px, 5.06vw, 80px);
  --px83: clamp(0px, 5.25vw, 83px);
  --px85: clamp(0px, 5.38vw, 85px);
  --px90: clamp(0px, 5.70vw, 90px);
  --px95: clamp(0px, 6.01vw, 95px);
  --px96: clamp(0px, 6.08vw, 96px);
  --px100: clamp(0px, 6.33vw, 100px);
  --px110: clamp(0px, 6.96vw, 110px);
  --px115: clamp(0px, 7.28vw, 115px);
  --px120: clamp(0px, 7.59vw, 120px);
  --px125: clamp(0px, 7.91vw, 125px);
  --px128: clamp(0px, 8.10vw, 128px);
  --px130: clamp(0px, 8.23vw, 130px);
  --px135: clamp(0px, 8.54vw, 135px);
  --px140: clamp(0px, 8.86vw, 140px);
  --px150: clamp(0px, 9.49vw, 150px);
  --px160: clamp(0px, 10.13vw, 160px);
  --px170: clamp(0px, 10.76vw, 170px);
  --px175: clamp(0px, 11.08vw, 175px);
  --px178: clamp(0px, 11.27vw, 178px);
  --px180: clamp(0px, 11.39vw, 180px);
  --px184: clamp(0px, 11.65vw, 184px);
  --px190: clamp(0px, 12.03vw, 190px);
  --px194: clamp(0px, 12.28vw, 194px);
  --px200: clamp(0px, 12.66vw, 200px);
  --px210: clamp(0px, 13.29vw, 210px);
  --px220: clamp(0px, 13.92vw, 220px);
  --px230: clamp(0px, 14.56vw, 230px);
  --px241: clamp(0px, 15.25vw, 241px);
  --px250: clamp(0px, 15.82vw, 250px);
  --px260: clamp(0px, 16.46vw, 260px);
  --px270: clamp(0px, 17.09vw, 270px);
  --px280: clamp(0px, 17.72vw, 280px);
  --px300: clamp(0px, 18.99vw, 300px);
  --px310: clamp(0px, 19.62vw, 310px);
  --px320: clamp(0px, 20.25vw, 320px);
  --px330: clamp(0px, 20.89vw, 330px);
  --px340: clamp(0px, 21.52vw, 340px);
  --px345: clamp(0px, 21.84vw, 345px);
  --px350: clamp(0px, 22.15vw, 350px);
  --px360: clamp(0px, 22.78vw, 360px);
  --px370: clamp(0px, 23.42vw, 370px);
  --px400: clamp(0px, 25.32vw, 400px);
  --px430: clamp(0px, 27.22vw, 430px);
  --px450: clamp(0px, 28.48vw, 450px);
  --px475: clamp(0px, 30.06vw, 475px);
  --px500: clamp(0px, 31.65vw, 500px);
  --px550: clamp(0px, 34.81vw, 550px);
  --px600: clamp(0px, 37.97vw, 600px);
  --px634: clamp(0px, 40.13vw, 634px);
  --px646: clamp(0px, 40.89vw, 646px);
  --px650: clamp(0px, 41.14vw, 650px);
  --px690: clamp(0px, 43.67vw, 690px);
  --px700: clamp(0px, 44.30vw, 700px);
  --px720: clamp(0px, 45.57vw, 720px);
  --px730: clamp(0px, 46.2vw, 730px);
  --px750: clamp(0px, 47.47vw, 750px);
  --px800: clamp(0px, 50.63vw, 800px);
  --px820: clamp(0px, 51.9vw, 820px);
  --px850: clamp(0px, 53.8vw, 850px);
  --px900: clamp(0px, 56.96vw, 900px);
  --px950: clamp(0px, 60.13vw, 950px);
  --px1000: clamp(0px, 63.29vw, 1000px);
  --px1100: clamp(0px, 69.62vw, 1100px);
  --px1130: clamp(0px, 71.52vw, 1130px);
  --px1150: clamp(0px, 72.78vw, 1150px);
  --px1315: clamp(0px, 83.23vw, 1315px);
  --px1340: clamp(0px, 84.81vw, 1340px);
  --px1380: clamp(0px, 87.34vw, 1380px);
  --px1450: clamp(0px, 91.77vw, 1450px);
  --px688: clamp(0px, 43.54vw, 688px);
  --text: oklch(96.43% .007 88.64);
  --dull-text: oklch(76.67% .0044 91.46);
}


* {
  box-sizing: border-box
}

html,
body {
  height: 100% l;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-landour);
  line-height: 1.6;
}




@media only screen and (min-width:768px) {
  .container {
    width: 88%;
    max-width: 1440px !important;
  }
}

.site-header {
  padding: var(--px20) 0;
}

.brand-logo {
  height: var(--px36);
  width: auto;
  display: block;
  object-fit: contain;
}

@media (min-width:768px) {
  .brand-logo {
    height: var(--px42)
  }
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--px12);
  margin: var(--px15);
}

.logo {
  display: none
}

.title {
  font-size: var(--px18);
  margin: 0
}

.nav {
  display: flex;
  gap: var(--px20)
}

.nav a {
  color: var(--text);
  text-decoration: none;
  padding: var(--px8) var(--px10);
  border-radius: var(--px6)
}

.nav a:hover {
  background: #1a1a1a;
  color: var(--accent)
}

.hero-section {
  padding: var(--px150) 0 var(--px60);
}

.section-title {
  font-size: clamp(40px, 8vw, 110px);
  margin: 0 0 var(--px20) 0
}

.main_head {
  font-size: var(--px110);
  font-weight: 800;
  word-spacing: -5px;
  max-width: var(--px1200);
  line-height: 1;
  text-transform: uppercase;
  color: var(--text);
  letter-spacing: -4px
}

.hero {
  min-height: 60vh;
  display: flex;
  align-items: center;
  padding: var(--px96) 0 var(--px64)
}

.hero-lead {
  font-size: clamp(16px, 2.2vw, 28px);
  max-width: var(--px800);
  color: var(--muted)
}

.main_pera {
  font-size: var(--px24);
  line-height: 1.3;
  color: var(--text);
  margin: 0;
}

.lead {
  font-size: var(--px18);
  color: var(--muted)
}

.card {
  background: var(--card);
  border: 1px solid #1f1f1f;
  border-radius: var(--px14);
  padding: var(--px18);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease
}

.card:hover {
  transform: translateY(var(--_px4));
  box-shadow: 0 var(--px12) var(--px24) rgba(0, 0, 0, .4);
  border-color: #2a2a2a
}

.team-card {
  display: flex;
  gap: var(--px14);
  align-items: center
}

.avatar {
  width: var(--px54);
  height: var(--px54);
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  background: #1a1a1a;
  color: var(--accent);
  font-weight: 700
}

.member-meta {
  display: flex;
  flex-direction: column
}

.member-name {
  font-weight: 600
}

.member-role {
  color: var(--muted);
  font-size: var(--px14)
}

.site-footer {
  border-top: 1px solid #1f1f1f
}



.site-footer p {
  margin: 0;
  color: var(--muted)
}

.why-list {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--px18)
}

@media (max-width:800px) {
  .why-list {
    grid-template-columns: 1fr
  }
}

.why-item {
  align-items: flex-start;
  background: var(--card);
  border: 1px solid #1f1f1f;
  border-radius: var(--px12);
  padding: var(--px16);
  font-size: var(--px18);
}

.why-label {
  font-weight: 500;
  color: var(--text);
  margin-right: 0.5em;
}

.why-desc {
  color: var(--muted)
}

.vm-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--px20)
}

@media (max-width:800px) {
  .vm-grid {
    grid-template-columns: 1fr
  }
}

.vm-card {
  background: var(--card);
  border: 1px solid #1f1f1f;
  border-radius: var(--px16);
  padding: var(--px22);
  display: block;
  gap: var(--px16);
  align-items: flex-start
}

.vm-icon {
  color: var(--accent);
  font-size: var(--px40);
  margin-bottom: var(--px10);
  filter: brightness(0) saturate(100%) invert(95%) sepia(22%) saturate(259%) hue-rotate(337deg) brightness(112%) contrast(92%);
  aspect-ratio: 1/1;
  height: auto;
  width: 1em;
}

.vm-icon img {
  object-fit: contain;
  width: 100%;
  height: 100%;
}

.vm-section {
  padding: var(--px80) 0 var(--px160);
}

#branding {
  padding: var(--px150) 0;
}

#why-choose-us .main_head {
  margin-bottom: var(--px30);
}

#branding .main_head {
  margin-bottom: var(--px30);
}

.slick-img {
  position: relative;
  overflow: hidden;
  margin: 0 var(--px15);
}

.slick-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
}

.slick-img::after {
  padding-top: 100%;
  content: "";
  display: block;
}

.slick-slider-section {
  position: relative;
  overflow: hidden;
}

.slick-slider-section::after,
.slick-slider-section::before {
  position: absolute;
  z-index: 1;
  width: 200%;
  height: 200%;
  content: "";
  background: #000;
  border-radius: 100%;
  left: 50%;
  transform: translateX(-50%);
}

.slick-slider-section::after {
  top: 80%;
}

.slick-slider-section::before {
  bottom: 80%;
}

.branding-icon img {
  aspect-ratio: 1/1;
  width: 4em;
  height: auto;
  filter: brightness(0) saturate(100%) invert(100%) sepia(66%) saturate(6538%) hue-rotate(112deg) brightness(96%) contrast(111%);
  border-radius: 0.3em;
  padding: 0.38em 0.38em 0.3em;
  margin-bottom: var(--px20);
}

.branding-name {
  font-size: var(--px24);
}

.service-slider {
  position: relative;
  margin: 0 var(--_px40);
}

.service-slider::after {
  content: "";
  background: linear-gradient(to left, transparent, rgba(0, 0, 0, 1));
  height: 100%;
  width: 20%;
  position: absolute;
  top: 0;
  left: 0;
}

.service-slider::before {
  content: "";
  background: linear-gradient(to right, transparent, rgba(0, 0, 0, 1));
  height: 100%;
  width: 20%;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
}

#Services {
  padding: var(--px150) 0;
}

.work-img {
  position: relative;
  overflow: hidden;
}

.work-img img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.work-img::after {
  content: "";
  display: block;
  padding-top: 100%;
}

.pera {
  font-size: var(--px18);
  line-height: 1.3;
  color: var(--text);
  margin: 0;
}

.work-title {
  font-weight: 600;
  margin: var(--px20) 0 var(--px5);
}

.work-desc {
  opacity: 0.7;
}

.work-section {
  padding: var(--px160) 0 0;
}

.work-section .row {
  padding: var(--px30) 0 0;
  row-gap: var(--px45);
}

.process-content {
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 10px;
  padding: var(--px20);
  aspect-ratio: 1/1;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: end;
  flex-direction: column;
}

.item6 .process-content {
  background: var(--text);
}

.item6 .process-content * {
  color: #000;
}

.process {
  padding: var(--px190) 0
}

.manag-session {
  padding: var(--px190) 0
}

.manag-session .row {
  row-gap: var(--px45)
}

.manag-session .main_head {
  margin-bottom: var(--px10)
}

.manag-session .main_pera {
  opacity: 0.8;
  margin-bottom: var(--px40)
}

.manager-img {
  position: relative;
  overflow: hidden;
  border-radius: var(--px10);
  border: 1px solid #1f1f1f;
  box-shadow: rgba(255, 255, 255, 0.2) 0px 0px 0px 1px inset, var(--border) 0px 0px 0px 1px;
}

.manager-img img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.manager-img::after {
  content: "";
  display: block;
  padding-top: 130%;
}



.manager-card {
  position: relative;
  transition: transform .2s ease, box-shadow .2s ease
}



.manager-content {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: var(--px10);
  z-index: 2;
  padding: var(--px20);
}

.manager-name {
  font-weight: 500;
}

.manager-title {
  opacity: 0.6;
}

.service-card {
  position: relative;
}

.service-img,
.serice-item .rel img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.service-card::after,
.serice-item .rel::after,
.service-track::after {
  content: "";
  display: block;
  padding-top: 120%;
}

.service-card .primary,
.serice-item .rel .main_pera {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: var(--px30) var(--px20);
  z-index: 2;
}

.service-card .primary .pera:first-child {
  font-weight: 600;
  color: var(--text);
  font-size: var(--px24);
}

.service-card .primary .pera:last-child {
  color: var(--text);
  opacity: 0.5;
  margin-top: 0.3em;
}

.service-card .secondary {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1em;
  text-align: center;
  background: rgba(0, 0, 0, 0.2);
}

.service-list {
  padding: var(--px150) 0 var(--px190);
}

.liquid-a {
  display: block;
  position: relative;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 30px;
  border: 2px solid rgba(255, 255, 255, 0.479);
  box-shadow: inset 0 8px 32px rgba(255, 255, 255, 0.096);
  transition: all 0.3s ease;
  font-size: var(--px6);
  margin-top: var(--px10);
  position: absolute;
  top: var(--px15);
  right: var(--px20);
  z-index: 1;
  height: var(--px30);
  aspect-ratio: 1/1;
  width: auto;
  padding: 0.5em;
  animation: calmFloat 3s ease-in-out infinite;
}

@keyframes calmFloat {

  0%,
  10% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(6px);
  }

  90% {
    transform: translateY(0);
  }
}

.liquid-a img {
  width: 100%;
  height: 100%;
  object-position: center;
  object-fit: contain;
  vertical-align: baseline;
  filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(103deg) brightness(104%) contrast(104%);
}

.rel {
  position: relative;
}

.service-item {
  position: absolute;
  width: 100%;
  height: 100%;
  transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  cursor: pointer;
}

.service-track {
  position: relative;
  perspective: 1000px;
  overflow: hidden;
}

.service-item {
  position: absolute;
  width: 100%;
  height: 100%;
  transition: all 0.6s ease-in-out;
  cursor: pointer;
}

.service-track.hovering .service-item:first-child {
  transform: translateY(100%) scale(1) !important;
  opacity: 0;
}

.primary-slider-ser {
  position: relative;
  overflow: hidden;
}

.hovery {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  transform: none;
  transition: all 0.6s ease-in-out;
}

.primary-slider-ser:hover .hovery {
  transform: translateY(102%);
}

.service-item.hovering {
  transform: translateY(102%) !important;
  opacity: 0;
}

.service-item {
  transition: all 0.6s ease-in-out;
}

.service-list .main_head {
  margin-bottom: var(--px30);
}

.posters-home-list {
  padding: var(--px30) 0 0;
}

.video-full {
  position: relative;
  height: 100vh;
}

.video-full video {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.full-video-section {
  padding: var(--px200) 0 var(--px130);
}

.service-list .row {
  row-gap: var(--px30)
}



/* Loader Styles */
.loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}


/* Main Content */
.wrapper-belt {
  overflow: hidden;
  position: relative;

}

.demo-text .wrapper {
  display: flex;
  white-space: nowrap;
}


/* Gallery Section Styles */
.demo-gallery {

  position: relative;
}

.demo-gallery li::after {
  content: "";
  display: block;
  padding-top: 80%;
}


.demo-gallery .wrapper {
  display: flex;
  gap: var(--px15);
}

.demo-gallery ul {
  list-style: none;
  padding: 0;
}

.demo-gallery li {
  flex-shrink: 0;
  width: calc(100% / 4);
  position: relative;
  overflow: hidden;
}

.demo-gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
}


.lp-brand__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: invert(100%) sepia(1%) saturate(5447%) hue-rotate(162deg) brightness(123%) contrast(100%);
}

.lp-brand__logo {
  height: auto;
  aspect-ratio: 1 / 1;
  width: auto;
  padding: 0 var(--px12);
}

.brand-sec-hm .row {
  row-gap: var(--px15);
  margin: 0 var(--_px25);
}

.brand-sec-hm {
  padding: var(--px160) 0 0;
}

.link-up li a,
.footer-sec-hm li a {
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  position: relative;
  padding-bottom: var(--px5);
}

.footer-sec-hm li {
  display: block;
  padding-bottom: var(--px15);
}

.link-up li a::after,
.footer-sec-hm li a::after {
  content: "\f061 ";
  font-family: 'FontAwesome';
  transform: rotate(-45deg);
  font-size: var(--px18);
  margin-left: var(--px10);
  display: inline-block;
}

.foot-media img {
  width: var(--px20);
  height: auto;
  object-fit: contain;
  aspect-ratio: 1 / 1;
  filter: invert(89%) sepia(91%) saturate(7%) hue-rotate(183deg) brightness(109%) contrast(97%);
}

.work-card {
  position: relative;
  overflow: hidden;
  transition: all 0.3s;
}

.work-hovery-up {
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 20px;
}

.work-slider-img {
  position: relative;
  overflow: hidden;
  margin: 0 var(--px10);
}


.work-slider-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
}

.work-slider-img::after {
  content: "";
  display: block;
  padding-top: 100%;
}

.work-hovery-up {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  top: 0;
  left: 0;
  opacity: 0;
  transition: all 0.6s;

}

.work-card:hover .work-hovery-up {
  opacity: 1;
}

.work-card:hover {
  transform: scale(1.02);
}

.work-slider {
  overflow: hidden;
  position: relative;

}

.work-slider::after {
  content: "";
  position: absolute;
  width: 105%;
  height: 100%;
  top: 0;
  left: -3;
  backdrop-filter: blur(10px);
  mask-image: linear-gradient(to right,
      black 0%,
      transparent 10% 90%,
      black 100%);
  z-index: 1;

}

.work-card:hover .work-uphover {
  opacity: 0;
}

.blackNWhite {
  filter: brightness(0) saturate(100%) invert(99%) sepia(3%) saturate(169%) hue-rotate(168deg) brightness(116%) contrast(100%);
}




img {
  animation: animatedBackground 10s linear infinite alternate;
}

@keyframes animatedBackground {
  from {
    background-position: 0 0;
  }

  to {
    background-position: 100% 0;
  }
}



.service-card {
  background: #000;
  border: 1px solid #1f1f1f;
}

.team-slider-img {
  position: relative;
  overflow: hidden;
}

.team-slider-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
}

.team-slider-img::after {
  content: "";
  display: block;
  padding-top: 130%;
}

.team-slider {
  overflow-x: visible;
  scrollbar-width: none;
  /* Firefox */
}

.team-slider::-webkit-scrollbar {
  display: none;
  /* Chrome, Safari, Edge */
}

.manag-session {
  overflow-x: hidden;
}


.flags img {
  object-fit: cover;
  border-radius: 50%;
  overflow: hidden;
  height: var(--px45);
  aspect-ratio: 1/1;
  width: auto;
}


.home-videos-row-top {
  animation: home-videos-row-top 60s linear infinite
}

.home-videos-row-bottom {
  animation: home-videos-row-bottom 60s linear infinite
}


@keyframes home-videos-row-top {
  0% {
    transform: translate(0)
  }

  50% {
    transform: translate(calc(-150% - 128px))
  }

  to {
    transform: translate(0)
  }
}

@keyframes home-videos-row-bottom {
  0% {
    transform: translate(0)
  }

  50% {
    transform: translate(calc(-200% - 160px))
  }

  to {
    transform: translate(0)
  }
}


.poster-image {
  position: relative;
}

.poster-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
}

.poster-image::after {
  content: "";
  display: block;
  padding-top: 80%;
}





/* tab view */
@media only screen and (max-width : 768px) {
  .brand-logo {
    margin-top: 10px;
    height: 30px;
  }


  .hero-section {
    padding: 114px 0 60px;

    .main_head {
      margin-bottom: 30px;
    }
  }

  .demo-gallery li {
    width: calc(100% / 2);
  }

  .demo-gallery .wrapper {
    gap: 15px;
  }

  .vm-icon {
    width: 40px;
    margin-bottom: 25px;
  }

  .vm-card {
    padding: 20px;
    border-radius: 16px;
  }

  .vm-section {
    padding: 70px 0px 110px;
  }

  .vm-grid {
    gap: 20px
  }

  #values .main_head {
    margin-bottom: 30px;
  }

  .why-item {
    font-size: 16px;
    gap: 10px;
    padding: 20px;
    border-radius: 16px;
  }

  .service-card .primary .pera:first-child {
    font-size: 24px;
  }

  .pera {
    font-size: 16px;
  }

  .service-list {
    padding: 95px 0 120px;
  }

  .full-video-section {
    padding: 125px 0 125px
  }

  .video-full {
    height: 300px;
  }

  .process-list li:not(:last-of-type) {
    margin-bottom: 20px;
  }

  #why-choose-us .main_head {
    margin-bottom: 30px;
  }

  .why-list {
    gap: 10px
  }

  .manag-session {
    padding: 115px 0 125px;
  }

  .work-section .row {
    row-gap: 40px;
  }

  .service-list .row {
    row-gap: 40px
  }

  .work-title {
    margin: 20px 0 5px;
  }

  .manager-content {
    padding: 20px;
  }

  .service-list .main_head {
    margin-bottom: 45px
  }

  .work-section {
    padding: 105px 0 0;
  }

  .liquid-a {
    top: 10px;
    right: 10px;
    padding: 6px;
    height: 40px;
  }

  .brand-sec-hm .row>div {
    max-width: calc(100% / 5);
  }

  .brand-sec-hm {
    padding: 110px 0 0;
  }


  .foot-media img {
    width: 20px;
  }

  .link-up li a::after,
  .footer-sec-hm li a::after {

    font-size: 16px;
    margin-left: 5px;

  }

  .footer-sec-hm li {
    padding-bottom: 10px;
  }

  .link-up li a,
  .footer-sec-hm li a {
    padding-bottom: 5px;
  }

  .main_pera {
    font-size: 20px;
    line-height: 1.5;
  }


  .service-card .primary {
    padding: 20px 15px;
  }

  .flags img {
    height: 35px;
  }


  .home-videos-row-top {
    animation: home-videos-row-top 40s linear infinite
  }

  .home-videos-row-bottom {
    animation: home-videos-row-bottom 40s linear infinite
  }


}

@media only screen and (max-width : 600px) {
  .container {
    padding: 0 20px;
  }

  .main_head {
    font-size: 40px;
    word-spacing: -2px;
    letter-spacing: 0px;
    line-height: 1.2;
  }

  .hero-section {
    .main_head {
      margin-bottom: 15px;
    }
  }

  .brand-logo {
    height: 22px;
  }


  .hero-section {
    padding: 114px 0 50px;
  }

  .vm-section {
    padding: 70px 0px 85px;
  }

  #values .main_head {
    margin-bottom: 25px;
  }

  .service-list {
    padding: 70px 0 85px;
  }

  .full-video-section {
    padding: 85px 0 85px;
  }

  .video-full {
    height: 185px;
  }

  #why-choose-us .main_head {
    margin-bottom: 25px;
  }

  .why-item {
    padding: 15px
  }

  .service-list .row {
    row-gap: 20px
  }

  .work-section {
    padding: 90px 0 0;
  }

  .manag-session {
    padding: 95px 0 100px;
  }

  .work-section .row {
    row-gap: 35px;
  }

  .brand-sec-hm .row>div {
    max-width: calc(100% / 4);
  }

  .brand-sec-hm {
    padding: 88px 0 0;
  }

  .main_pera {
    font-size: 18px;
    line-height: 1.5;
  }

  .work-section .row {
    row-gap: 20px;
  }

  .work-section .main_head {
    margin-bottom: 20px;
  }


  .flags img {
    height: 30px;
  }

  .home-videos-row-top {
    animation: home-videos-row-top 30s linear infinite
  }

  .home-videos-row-bottom {
    animation: home-videos-row-bottom 30s linear infinite
  }

  .liquid-a {

    height: 30px;
    padding: 3px;
  }

}

html * {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

html *::-webkit-scrollbar {
  display: none;
}